<template>
  <div class="my-articles-container">
    <div class="my-articles">
      <h2>我的文章</h2>
      <ul>
        <li v-for="(item,index) in articleList" :key="item.aid" class="article-item">
          <div class="article-image-container">
            <img :src="defaultimg" alt="文章图片" class="article-image" />
          </div>
          <div class="article-content">
            <div class="article-header">
              <!-- 添加路由跳转 -->
              <router-link :to="`/login/my-articles/articles/${item.aid}`" class="article-title-link"
                :title="item.articleTitle">
                <h3 class="article-title">
                  <!-- {{ article.title.length > 25 ? article.title.slice(0, 25) + '...' : article.title }} -->
                  {{index+1}}.{{ item.articleTitle }}
                </h3>
              </router-link>
              <!-- <span class="article-date">日期</span> -->
            </div>
            <div class="article-stats">
              <span>浏览量：{{ item.views }}</span>
              <!-- <span>点赞：</span>
              <span>评论：</span> -->
              <button class="delete-button" @click="deleteArticle(item.aid)">删除</button>
            </div>
          </div>
        </li>
      </ul>
    </div>

  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onMounted } from 'vue';
import api from '../../api/api.js';

import { userStore } from '../../stores/userStore.js'


//数据定义
const articleList = ref([
  {
    aid: 0,
    articleTitle: "标题",
    views: 0
  }
]);
const defaultimg = ref('https://tse1-mm.cn.bing.net/th/id/OIP-C.tk4MkENFUP-MTyLzPdA6fgHaHa?w=161&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7')

const userInfo = userStore()
const { userid } = userInfo

//获取用户文章列表
const getArticles = async () => {
  try {
    const res = await api.searchSelfArticleApi({ type: "article" })
    articleList.value = res.data.datalist
  } catch (error) {
    console.error("获取用户文章列表失败", error);
  }
};
// 截断标题的函数
function truncateTitles() {
  let length = articleList.value.length;
  for (let i = 0; i < length; i++) {
    if (articleList.value[i].articleTitle.length > 30) {
      articleList.value[i].articleTitle = articleList.value[i].articleTitle.substring(0, 27) + '...'
    }
  }
}

//组件加载完成后获取文章列表
onMounted(async () => {
  try {
    await getArticles()

    // 截断标题
    truncateTitles()
  } catch (error) {
    console.error("组件加载完成后获取文章列表失败", error);
  }
})

// 删除文章
const deleteArticle = async (id) => {
  try {
    await api.deleteArticleApi({aid: id})

    // 刷新文章列表
    await getArticles()
    truncateTitles()
  } catch (error) { 
    console.error("删除文章失败", error);
  }
};
</script>

<style scoped lang="less">
.router-link-active {
  text-decoration: none;
  color: #fff;
}

a {
  text-decoration: none;
  color: #fff;
}

.my-articles-container {
  background-color: #f1f1f1;
  padding: 20px;
  border-radius: 8px;
  max-width: 800px;
  margin: auto;
  position: relative;
  min-height: 500px;
}

.my-articles {
  h2 {
    text-align: center;
    color: #333;
    margin-bottom: 10px;
    /* 调整段落之间的间距 */
  }

  .article-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    margin-bottom: 10px;
    width: 95%;

    .article-image-container {
      width: 75px;
      height: 75px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
    }

    .article-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px;
    }

    .article-content {
      flex: 1;

      .article-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .article-title {
          font-size: 1.1em;
          color: #333;
          font-weight: bold;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          // max-width: 60%;
        }

        .article-title:hover {
          color: #F04143;
          /* 鼠标悬浮时文字变成红色 */
        }

        .article-date {
          color: #999;
          font-size: 0.9em;
        }
      }

      .article-stats {
        display: flex;
        align-items: center;
        margin-top: 8px;
        font-size: 0.9em;
        color: #666;

        span {
          margin-right: 15px;
        }

        .delete-button {
          margin-left: auto;
          background-color: #ccc;
          color: white;
          border: none;
          padding: 5px 10px;
          cursor: pointer;
          border-radius: 4px;

          &:hover {
            background-color: #bbb;
          }
        }
      }
    }
  }
}

.pagination {
  display: flex;
  justify-content: center;
  position: sticky;
  bottom: 0;
  background-color: #f1f1f1;
  padding: 10px;
  margin-top: 20px;

  button {
    background: #007BFF;
    color: white;
    border: none;
    padding: 8px 16px;
    margin: 0 5px;
    cursor: pointer;

    &:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
  }
}
</style>
